 <div class="d-flex align-items-center login-content ">
      <form [formGroup] = "myForm" (ngSubmit)="onSubmit(myForm.value)">
          <h4 class="d-flex  justify-content-center">登录界面</h4>
          <p *ngIf="myForm.invalid" class="text-danger">无效的类型</p>
          <div class="form-group">
            <label for="userName">用户名</label>
            <input type="text" class="form-control " id="userName" aria-describedby="请输入用户名" name="userName" 
             [formControl]="userName" [ngClass]="{ 'is-invalid':userName.invalid, 'is-valid':userName.valid}" >
            <div class="valid-feedback">用户名格式正确
            </div>
            <div class="invalid-feedback">
              <span *ngIf="userName.hasError( 'required')">
                用户名不得为空且不得小于7位
              </span>
              <span *ngIf="!userName.hasError( 'required') && userName.hasError( 'invalidUser')">
                用户名必须为zime开头
              </span>
              
              
            </div>
  
          </div>
          <div class="form-group">
            <label for="Password">密码</label>
            <input type="password" class="form-control " id="password" aria-describedby="请输入密码" name="password"
            [formControl]="password" [ngClass]="{ 'is-invalid':password.invalid, 'is-valid':password.valid}">
            <div class="valid-feedback">密码格式正确
          </div>
          <div class="invalid-feedback">
              密码必须大于5位
          </div>
          </div>
          <a href="https://www.baidu.com" target="_blank" >
          <button type="submit"  target="_self"  class="btn btn-primary btn-block" >
            登录</button>
          </a>
          
        
        </form>
  </div>
 
